<template>
    <el-dialog v-model="dialogFormVisible" :title="dialogTitle" @close="closeDialog">
        <el-form :model="dialogData" ref="dialogForm">
            <el-form-item>
            <slot name="upload"></slot>
            </el-form-item>
            <el-form-item v-for="(data, v) in dialogData" :key="v" :label="data.label" :label-width="formLabelWidth"
                :prop="v + '.value'" :rules="{
                    required: true,
                    trigger: 'blur',
                    message: data.label + '不能为空'
                }">
                <el-input v-model="data.value" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="offClick">取消</el-button>
                <el-button @click="successClick(dialogForm)" type="primary">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, watchEffect, toRefs } from 'vue'
let props = defineProps({
    visible: {
        type: Boolean,
        default() {
            return false
        }
    },
    dialogData: {
        type: Object,
        default() {
            return {}
        }
    },
    formLabelWidth: {
        type: String,
        default() {
            return '140px'
        }
    },
    dialogTitle: {
        type: String,
        default() {
            return '增加学员信息'
        }
    }
})
let dialogFormVisible = ref(props.visible)
let { visible } = toRefs(props)
watchEffect(() => {
    // console.log(props.visible);
    //侦听props.visible，赋值给dialogFormVisible来控制dialog显示和隐藏
    dialogFormVisible.value = visible.value
})

let emits = defineEmits(['sureClick', 'cancleClick','closeClick'])
let offClick = () => {
    dialogFormVisible.value = false
    emits('cancleClick')
}
//声明ref引用dialog的结构
let dialogForm = ref()
let successClick = (form) => {
    // console.log(form[0].validate);
    form.validate(valid => {
        if (valid) {
            emits('sureClick', dialogForm)
        } else {
            
        }
    })
}
let closeDialog = ()=>{
    emits('closeClick')
}

</script>